<template>
  <div id="situation">
    <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="whole" label="全网">
        <div class="report">
          <div class="report_title">企业数</div>
          <p class="report_data" v-if="reports.businesscount == 0">-</p>
          <p class="report_data" v-else>
            {{ reports.businesscount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">用户数</div>
          <p class="report_data" v-if="reports.usercount == 0">-</p>
          <p class="report_data" v-else>
            {{ reports.usercount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">活跃用户数</div>
          <p class="report_data" v-if="reports.active_user_nums == 0">-</p>
          <p class="report_data" v-else>
            {{ reports.active_user_nums }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">累计流量（GB）</div>
          <p class="report_data" v-if="reports.sum_throughputcount == null">
            -
          </p>
          <p v-else class="report_data">
            {{ reports.sum_throughputcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">上行流量（GB）</div>
          <p class="report_data" v-if="reports.upward_flowcount == null">
            -
          </p>
          <p v-else class="report_data">
            {{ reports.upward_flowcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">下行流量（GB）</div>
          <p class="report_data" v-if="reports.downward_flowcount == null">
            -
          </p>
          <p v-else class="report_data">
            {{ reports.downward_flowcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">漫入用户数</div>
          <p class="report_data" v-if="roamIn == 0">
            -
          </p>
          <p v-else class="report_data">
            {{ roamIn }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">漫出用户数</div>
          <p class="report_data" v-if="roamOut == 0">
            -
          </p>
          <p v-else class="report_data">
            {{ roamOut }}
          </p>
        </div>
      </el-tab-pane>
      <el-tab-pane name="situation_2G" label="2G">
        <div class="report">
          <div class="report_title">企业数</div>
          <p class="report_data" v-if="differences.businesscount == 0">-</p>
          <p class="report_data" v-else>
            {{ differences.businesscount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">用户数</div>
          <p class="report_data" v-if="differences.usercount == 0">-</p>
          <p class="report_data" v-else>
            {{ differences.usercount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">活跃用户数</div>
          <p class="report_data" v-if="differences.active_user_nums == 0">-</p>
          <p class="report_data" v-else>
            {{ differences.active_user_nums }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">累计流量（GB）</div>
          <p class="report_data" v-if="differences.sum_throughputcount == null">-</p>
          <p class="report_data" v-else>
            {{ differences.sum_throughputcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">上行流量（GB）</div>
          <p class="report_data" v-if="differences.upward_flowcount == null">-</p>
          <p class="report_data" v-else>
            {{ differences.upward_flowcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">下行流量（GB）</div>
          <p class="report_data" v-if="differences.downward_flowcount == null">-</p>
          <p class="report_data" v-else>
            {{ differences.downward_flowcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">漫入用户数</div>
          <p class="report_data" v-if="roamIn == 0">-</p>
          <p class="report_data" v-else>
            {{ roamIn }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">漫出用户数</div>
          <p class="report_data" v-if="roamOut == 0">-</p>
          <p class="report_data" v-else>
            {{ roamOut }}
          </p>
        </div>
      </el-tab-pane>
      <el-tab-pane name="situation_4G" label="4G">
        <div class="report">
          <div class="report_title">企业数</div>
          <p class="report_data" v-if="excellents.businesscount == 0">-</p>
          <p class="report_data" v-else>
            {{ excellents.businesscount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">用户数</div>
          <p class="report_data" v-if="excellents.usercount == 0">-</p>
          <p class="report_data" v-else>
            {{ excellents.usercount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">活跃用户数</div>
          <p class="report_data" v-if="excellents.active_user_nums == 0">-</p>
          <p class="report_data" v-else>
            {{ excellents.active_user_nums }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">累计流量（GB）</div>
          <p class="report_data" v-if="excellents.sum_throughputcount == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.sum_throughputcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">上行流量（GB）</div>
          <p class="report_data" v-if="excellents.upward_flowcount == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.upward_flowcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">下行流量（GB）</div>
          <p class="report_data" v-if="excellents.downward_flowcount == null">-</p>
          <p class="report_data" v-else>
            {{ excellents.downward_flowcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">漫入用户数</div>
          <p class="report_data" v-if="roamIn == 0">-</p>
          <p class="report_data" v-else>
            {{ roamIn }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">漫出用户数</div>
          <p class="report_data" v-if="roamOut == 0">-</p>
          <p class="report_data" v-else>
            {{ roamOut }}
          </p>
        </div>
      </el-tab-pane>
      <el-tab-pane name="situation_NB-IOT" label="NB-IOT">
        <div class="report">
          <div class="report_title">企业数</div>
          <p class="report_data" v-if="nbiots.businesscount == 0">-</p>
          <p class="report_data" v-else>
            {{ nbiots.businesscount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">用户数</div>
          <p class="report_data" v-if="nbiots.usercount == 0">-</p>
          <p class="report_data" v-else>
            {{ nbiots.usercount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">活跃用户数</div>
          <p class="report_data" v-if="nbiots.active_user_nums == 0">-</p>
          <p class="report_data" v-else>
            {{ nbiots.active_user_nums }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">累计流量（GB）</div>
          <p class="report_data" v-if="nbiots.sum_throughputcount == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.sum_throughputcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">上行流量（GB）</div>
          <p class="report_data" v-if="nbiots.upward_flowcount == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.upward_flowcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">下行流量（GB）</div>
          <p class="report_data" v-if="nbiots.downward_flowcount == null">-</p>
          <p class="report_data" v-else>
            {{ nbiots.downward_flowcount }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">漫入用户数</div>
          <p class="report_data" v-if="roamIn == 0">-</p>
          <p class="report_data" v-else>
            {{ roamIn }}
          </p>
        </div>
        <div class="report">
          <div class="report_title">漫出用户数</div>
          <p class="report_data" v-if="roamOut == 0">-</p>
          <p class="report_data" v-else>
            {{ roamOut }}
          </p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: ["reports", "excellents", "differences", "nbiots","roamIn","roamOut","roamSum"],
  data() {
    return {
      activeName: "whole",

    };
  },
  mounted() {},
  methods: {
    // 页面切换
    handleClick(tab, event) {
      this.$emit('switch',this.activeName);
    },
  },
};
</script>

<style>
#situation {
  width: 17vw;
  height: 89vh;
  background: #edf1f9;
  position: absolute;
  top: 4vh;
  left: 1vw;
}
#situation .report {
  width: auto;
  height: 8vh;
  text-align: center;
  padding: 0.5vh 0.5vw;
}
#situation .report_title {
  font-size: 18px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
}
#situation .report_data {
  color: #2977ff;
  font-size: 25px;
  font-family: Microsoft YaHei, Microsoft YaHei-Bold;
  font-weight: 700;
}
#situation .report_img {
  display: inline-block;
  width: 0.8vw;
  height: 0.8vw;
  border: 1px solid #006eab;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
}
@media screen and (max-width: 1366px) {
  #situation {
    width: 17vw;
    height: 89vh;
    background: #edf1f9;
    position: absolute;
    top: 4vh;
    left: 1vw;
  }
  #situation .report {
    width: auto;
    height: 8vh;
    text-align: center;
    padding: 0.5vh 0.5vw;
  }
  #situation .report_title {
    font-size: 15px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
  }
  #situation .report_data {
    color: #2977ff;
    font-size: 23px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
  }
  #situation .report_img {
    display: inline-block;
    width: 0.8vw;
    height: 0.8vw;
    border: 1px solid #006eab;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
  }
}
</style>